<template>
  <div class="app-container home">
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="8" @click="goWarrantyCard()">-->
<!--        <div class="grid-content ep-bg-purple">-->
<!--          <el-card class="update-log" style="text-align: center">-->
<!--            <br/>-->
<!--            <h1>待审核 - 质保卡</h1>-->
<!--            <br/>-->
<!--          </el-card>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="8" @click="goServicerRquest()">-->
<!--        <div class="grid-content ep-bg-purple">-->
<!--          <el-card class="update-log" style="text-align: center">-->
<!--            <br/>-->
<!--            <h1>待审核 - 轮胎申请</h1>-->
<!--            <br/>-->
<!--          </el-card>-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->

<!--    <el-row :gutter="20" style="margin-bottom: 20px">-->
<!--      <el-cell :span="24">-->
<!--        &lt;!&ndash;      <el-item style="width:400px; height:350px">&ndash;&gt;-->
<!--        <div class="grid-content ep-bg-purple">-->
<!--          <el-card style="width: 300px; height: 90px; background-color: #91CC75; color: #fff; margin-right: 10px;">-->
<!--              <H1 style="display: inline-block">用户注册数 </H1>&nbsp;&nbsp;&nbsp;-->
<!--              <H2 style="display: inline-block"><CountTo :start="0" :end="userCount" :duration="3000"></CountTo></H2>-->
<!--          </el-card>-->
<!--        </div>-->
<!--        &lt;!&ndash;      </el-item>&ndash;&gt;-->
<!--      </el-cell>-->
<!--    </el-row>-->

    <!--  搜索条件  -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="true">
      <el-row>
        <el-col>
          <el-form-item label="" prop="Created" style="width: 240px; margin-right: 10px;">
            <el-date-picker
                v-model="dateRangeCreated"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="创建开始日期"
                end-placeholder="创建结束日期"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="" prop="Province">
              <el-tree-select multiple
                  v-model="queryParams.cityList"
                  :data="cityOptions"
                  :props="{ value: 'id', label: 'label', children: 'children' }"
                  value-key="id"
                  placeholder="请选择省份"
                  style="width: 240px"
                  check-strictly
              />
            </el-form-item>

          <el-form-item label="">
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <!--      <el-row :gutter="10" class="mb8">-->
      <!--        <el-col>-->
      <!--&lt;!&ndash;          <el-form-item label="轮胎条形码1" prop="TireCode1">&ndash;&gt;-->
      <!--&lt;!&ndash;            <el-input&ndash;&gt;-->
      <!--&lt;!&ndash;                v-model="queryParams.TireCode1"&ndash;&gt;-->
      <!--&lt;!&ndash;                placeholder="请输入轮胎条形码1"&ndash;&gt;-->
      <!--&lt;!&ndash;                clearable&ndash;&gt;-->
      <!--&lt;!&ndash;                @keyup.enter="handleQuery"&ndash;&gt;-->
      <!--&lt;!&ndash;            />&ndash;&gt;-->
      <!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
      <!--&lt;!&ndash;          <el-form-item label="轮胎条形码2" prop="TireCode2">&ndash;&gt;-->
      <!--&lt;!&ndash;            <el-input&ndash;&gt;-->
      <!--&lt;!&ndash;                v-model="queryParams.TireCode2"&ndash;&gt;-->
      <!--&lt;!&ndash;                placeholder="请输入轮胎条形码2"&ndash;&gt;-->
      <!--&lt;!&ndash;                clearable&ndash;&gt;-->
      <!--&lt;!&ndash;                @keyup.enter="handleQuery"&ndash;&gt;-->
      <!--&lt;!&ndash;            />&ndash;&gt;-->
      <!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
      <!--&lt;!&ndash;          <el-form-item label="轮胎条形码3" prop="TireCode3">&ndash;&gt;-->
      <!--&lt;!&ndash;            <el-input&ndash;&gt;-->
      <!--&lt;!&ndash;                v-model="queryParams.TireCode3"&ndash;&gt;-->
      <!--&lt;!&ndash;                placeholder="请输入轮胎条形码3"&ndash;&gt;-->
      <!--&lt;!&ndash;                clearable&ndash;&gt;-->
      <!--&lt;!&ndash;                @keyup.enter="handleQuery"&ndash;&gt;-->
      <!--&lt;!&ndash;            />&ndash;&gt;-->
      <!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
      <!--&lt;!&ndash;          <el-form-item label="轮胎条形码4" prop="TireCode4">&ndash;&gt;-->
      <!--&lt;!&ndash;            <el-input&ndash;&gt;-->
      <!--&lt;!&ndash;                v-model="queryParams.TireCode4"&ndash;&gt;-->
      <!--&lt;!&ndash;                placeholder="请输入轮胎条形码4"&ndash;&gt;-->
      <!--&lt;!&ndash;                clearable&ndash;&gt;-->
      <!--&lt;!&ndash;                @keyup.enter="handleQuery"&ndash;&gt;-->
      <!--&lt;!&ndash;            />&ndash;&gt;-->
      <!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
      <!--&lt;!&ndash;          <el-form-item label="openid" prop="OpenId">&ndash;&gt;-->
      <!--&lt;!&ndash;            <el-input&ndash;&gt;-->
      <!--&lt;!&ndash;                v-model="queryParams.OpenId"&ndash;&gt;-->
      <!--&lt;!&ndash;                placeholder="请输入openid"&ndash;&gt;-->
      <!--&lt;!&ndash;                clearable&ndash;&gt;-->
      <!--&lt;!&ndash;                @keyup.enter="handleQuery"&ndash;&gt;-->
      <!--&lt;!&ndash;            />&ndash;&gt;-->
      <!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
      <!--          -->
      <!--        </el-col>-->
      <!--      </el-row>-->

    </el-form>

    <el-row :gutter="20" style="justify-content: space-around;">
      <el-cell :span="8" style="flex: 0 1 32%;margin-bottom: 10px">
          <el-card>
            <ECharts :options="optionsCategory1" style="height:320px"/>
          </el-card>
      </el-cell>
      <el-cell :span="8" style="flex: 0 1 32%;margin-bottom: 10px">
          <el-card>
            <ECharts :options="optionsCategory2" style="height:320px"/>
          </el-card>
      </el-cell>
      <el-cell :span="8" style="flex: 0 1 32%;margin-bottom: 10px">
          <el-card>
            <ECharts :options="optionsCategory0" style="height:320px"/>
          </el-card>
      </el-cell>
    </el-row>
    <el-row :gutter="20" style="justify-content: space-around;">
      <el-cell :span="7"  style="flex: 0 1 23%; margin-bottom: 10px">
          <el-card style="padding:0;">
            <ECharts :options="optionsPie1" style="height:360px;"/>
          </el-card>
      </el-cell>
      <el-cell :span="7" style="flex: 0 1 23%;margin-bottom: 10px">
          <el-card style="padding:0;">
            <ECharts :options="optionsPie2" style="height:360px;"/>
          </el-card>
      </el-cell>
      <el-cell :span="10" style="flex: 0 1 50%;margin-bottom: 10px">
        <div class="grid-content ep-bg-purple">
          <el-card>
            <ECharts :options="optionsCategory3" style="height:360px;" />
          </el-card>
        </div>
      </el-cell>
    </el-row>

<!--    <el-row :gutter="20">-->
<!--      <el-cell :span="24" style="width: 50%;margin-right: 10px;">-->
<!--        <div class="grid-content ep-bg-purple">-->
<!--          <el-card>-->
<!--         <ECharts :options="optionsCategory3" style="" />-->
<!--          </el-card>-->
<!--        </div>-->
<!--      </el-cell>-->
<!--    </el-row>-->

    <!--    <el-row :gutter="20">-->
<!--      <el-col :sm="24" :lg="24">-->
<!--        <blockquote class="text-warning" style="font-size: 14px">-->
<!--          领取阿里云通用云产品1888优惠券-->
<!--          <br />-->
<!--          <el-link-->
<!--            href="https://www.aliyun.com/minisite/goods?userCode=brki8iof"-->
<!--            type="primary"-->
<!--            target="_blank"-->
<!--            >https://www.aliyun.com/minisite/goods?userCode=brki8iof</el-link-->
<!--          >-->
<!--          <br />-->
<!--          领取腾讯云通用云产品2860优惠券-->
<!--          <br />-->
<!--          <el-link-->
<!--            href="https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console"-->
<!--            type="primary"-->
<!--            target="_blank"-->
<!--            >https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console</el-link-->
<!--          >-->
<!--          <br />-->
<!--          阿里云服务器折扣区-->
<!--          <el-link href="http://aly.ruoyi.vip" type="primary" target="_blank"-->
<!--            >>☛☛点我进入☚☚</el-link-->
<!--          >-->
<!--          &nbsp;&nbsp;&nbsp; 腾讯云服务器秒杀区-->
<!--          <el-link href="http://txy.ruoyi.vip" type="primary" target="_blank"-->
<!--            >>☛☛点我进入☚☚</el-link-->
<!--          ><br />-->
<!--          <h4 class="text-danger">-->
<!--            云产品通用红包，可叠加官网常规优惠使用。(仅限新用户)-->
<!--          </h4>-->
<!--        </blockquote>-->

<!--        <hr />-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--    <el-row :gutter="20">-->
<!--      <el-col :sm="24" :lg="12" style="padding-left: 20px">-->
<!--        <h2>NEXEN TIRE 框架</h2>-->
<!--        <p>-->
<!--          更好的帮助企业管理更好的管理，企业工作流程，如：免费注册用户、会员卡申请、审核申请-->
<!--        </p>-->
<!--        <p>-->
<!--          <b>当前版本:</b> <span>v{{ version }}</span>-->
<!--        </p>-->
<!--&lt;!&ndash;        <p>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-tag type="danger">&yen;免费开源</el-tag>&ndash;&gt;-->
<!--&lt;!&ndash;        </p>&ndash;&gt;-->
<!--&lt;!&ndash;        <p>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-button&ndash;&gt;-->
<!--&lt;!&ndash;            type="primary"&ndash;&gt;-->
<!--&lt;!&ndash;            icon="Cloudy"&ndash;&gt;-->
<!--&lt;!&ndash;            plain&ndash;&gt;-->
<!--&lt;!&ndash;            @click="goTarget('https://gitee.com/y_project/RuoYi-Vue')"&ndash;&gt;-->
<!--&lt;!&ndash;            >访问码云</el-button&ndash;&gt;-->
<!--&lt;!&ndash;          >&ndash;&gt;-->
<!--&lt;!&ndash;          <el-button&ndash;&gt;-->
<!--&lt;!&ndash;            icon="HomeFilled"&ndash;&gt;-->
<!--&lt;!&ndash;            plain&ndash;&gt;-->
<!--&lt;!&ndash;            @click="goTarget('http://ruoyi.vip')"&ndash;&gt;-->
<!--&lt;!&ndash;            >访问主页</el-button&ndash;&gt;-->
<!--&lt;!&ndash;          >&ndash;&gt;-->
<!--&lt;!&ndash;        </p>&ndash;&gt;-->
<!--      </el-col>-->

<!--      <el-col :sm="24" :lg="12" style="padding-left: 50px">-->
<!--        <el-row>-->
<!--          <el-col :span="12">-->
<!--            <h2>技术选型</h2>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="6">-->
<!--            <h4>后端技术</h4>-->
<!--            <ul>-->
<!--              <li>SpringBoot</li>-->
<!--              <li>Spring Security</li>-->
<!--              <li>JWT</li>-->
<!--              <li>MyBatis</li>-->
<!--              <li>Druid</li>-->
<!--              <li>Fastjson</li>-->
<!--              <li>...</li>-->
<!--            </ul>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <h4>前端技术</h4>-->
<!--            <ul>-->
<!--              <li>Vue</li>-->
<!--              <li>Vuex</li>-->
<!--              <li>Element-ui</li>-->
<!--              <li>Axios</li>-->
<!--              <li>Sass</li>-->
<!--              <li>Quill</li>-->
<!--              <li>...</li>-->
<!--            </ul>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--    <el-divider />-->
<!--    <el-row :gutter="20">-->
<!--      <el-col :xs="24" :sm="24" :md="12" :lg="8">-->
<!--        <el-card class="update-log">-->
<!--          <template v-slot:header>-->
<!--            <div class="clearfix">-->
<!--              <span>联系信息</span>-->
<!--            </div>-->
<!--          </template>-->
<!--          <div class="body">-->
<!--            <p>-->
<!--              <i class="el-icon-s-promotion"></i> 官网：-->
<!--              <el-link href="http://www.ruoyi.vip" target="_blank">www.nexen.com</el-link>-->
<!--            </p>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :xs="24" :sm="24" :md="12" :lg="8">-->
<!--        <el-card class="update-log">-->
<!--          <template v-slot:header>-->
<!--            <div class="clearfix">-->
<!--              <span>更新日志</span>-->
<!--            </div>-->
<!--          </template>-->
<!--          <el-collapse accordion>-->
<!--            <el-collapse-item title="v0.0.2 - 2024-07-30">-->
<!--              <ol>-->
<!--                <li>项目创建</li>-->
<!--                <li>基础框架搭建</li>-->
<!--                <li>系统基础数据库表创建</li>-->
<!--                <li>业务表数据库表创建</li>-->
<!--              </ol>-->
<!--            </el-collapse-item>-->
<!--            <el-collapse-item title="v0.0.1 - 2024-07-30">-->
<!--              <ol>-->
<!--                <li>项目创建</li>-->
<!--                <li>基础框架搭建</li>-->
<!--                <li>系统基础数据库表创建</li>-->
<!--                <li>业务表数据库表创建</li>-->
<!--              </ol>-->
<!--            </el-collapse-item>-->
<!--          </el-collapse>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--&lt;!&ndash;      <el-col :xs="24" :sm="24" :md="12" :lg="8">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-card class="update-log">&ndash;&gt;-->
<!--&lt;!&ndash;          <template v-slot:header>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="clearfix">&ndash;&gt;-->
<!--&lt;!&ndash;              <span>捐赠支持</span>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;          </template>&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="body">&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;            <img src="@/assets/images/pay.png" alt="donate" style="width:100%"/>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;            <span style="display: inline-block; height: 30px; line-height: 30px">你可以请作者喝杯咖啡表示鼓励</span>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-card>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-col>&ndash;&gt;-->
<!--    </el-row>-->
  </div>
</template>

<script setup name="Index">
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'
const { proxy } = getCurrentInstance();
let { service_warranty_card_status } = proxy.useDict('service_warranty_card_status');
let { service_servicerequest_status } = proxy.useDict('service_servicerequest_status');


import { getMemberCount, getMemberWeek, getWarrantycardWeek, getServicerequestWeek, getWarrantycardStatus, getServicerequestStatus, getWarrantycardProvinceCount } from '@/api/merchant/statistics';
import {listCityAll} from "@/api/merchant/city";
const route = useRoute();
const version = ref('1.0.0')

const optionsCategory0 = ref({});
const optionsCategory1 = ref({});
const optionsCategory2 = ref({});
const optionsCategory3 = ref({});

const optionsPie1 = ref({});
const optionsPie2 = ref({});
const cityOptions = ref([]);

function time() {
  let date = new Date();
  let now_date = parseTime(date, "{y}-{m}-{d}");
  date.setMonth(date.getMonth()-1);
  let last_date = parseTime(date, "{y}-{m}-{d}");
  return [last_date, now_date];
}
const userCount = ref(0);
const dateRangeCreated = ref(time());
const data = reactive({
  form: {},
  queryParams: {
    cityList: null,
    beginTime: null,
    endTime: null,
  }
});
const { queryParams, form } = toRefs(data);

function memberWeek(){
  if (null != dateRangeCreated && '' != dateRangeCreated) {
    queryParams.value["beginTime"] = dateRangeCreated.value[0];
    queryParams.value["endTime"] = dateRangeCreated.value[1];
  }
  getMemberWeek(queryParams.value).then(response => {
    let data = response.data;
    let dateList = [];
    let countList = [];
    data.map(item => {
      dateList.push(item.label);
      countList.push(item.count);
    });

    optionsCategory0.value = {
      title: {
        text: '用户注册',
        subtext: '日期'
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: dateList,
        axisLabel: {
          show: true,
          fontSize: 8, // 根据需要调整字体大小
          interval: 0, // 设置为0以显示所有坐标点
          formatter: function(value) {
            return value.split("-")[1] + "-" + value.split("-")[2];
          }
        },
        show: true
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          // 使用 formatter 函数格式化标签
          formatter: function(value) {
            // 返回值如果为整数则显示，否则返回空字符串
            return parseInt(value, 10) === value ? value : '';
          }
        }
      },
      series: [
        {
          // name: '待审核',
          type: 'bar',
          data: countList,
          barGap: '20%',
          showBackground: true,
          label: {
            show: true,
            position: 'top', // 顶部显示
            formatter: '{c}', // 显示数据值
          },
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          },
          // barWidth: 30
        }
      ]
    };
  })
}
function warrantycardWeek(){
  if (null != dateRangeCreated && '' != dateRangeCreated) {
    queryParams.value["beginTime"] = dateRangeCreated.value[0];
    queryParams.value["endTime"] = dateRangeCreated.value[1];
  }
  getWarrantycardWeek(queryParams.value).then(response => {
    let data = response.data;
    let dateList = [];
    let countList = [];
    data.map(item => {
      dateList.push(item.label);
      countList.push(item.count);
    });

    optionsCategory1.value = {
      title: {
        text: '质保卡',
        subtext: '日期'
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: dateList,
        axisLabel: {
          show: true,
          fontSize: 8, // 根据需要调整字体大小
          interval: 0, // 设置为0以显示所有坐标点
          formatter: function(value) {
            return value.split("-")[1] + "-" + value.split("-")[2];
          }
        },
        show: true
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          // 使用 formatter 函数格式化标签
          formatter: function(value) {
            // 返回值如果为整数则显示，否则返回空字符串
            return parseInt(value, 10) === value ? value : '';
          }
        }
      },
      series: [
        {
          // name: '待审核',
          type: 'bar',
          data: countList,
          label: {
            show: true,
            position: 'top', // 顶部显示
            formatter: '{c}', // 显示数据值
          },
          barGap: '20%',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          },
          // barWidth: 50   // 设置每一列固定宽度
        }
      ]
    };
  })
}
function servicerequestWeek(){
  if (null != dateRangeCreated && '' != dateRangeCreated) {
    queryParams.value["beginTime"] = dateRangeCreated.value[0];
    queryParams.value["endTime"] = dateRangeCreated.value[1];
  }
  getServicerequestWeek(queryParams.value).then(response => {
    let data = response.data;
    let dateList = [];
    let countList = [];
    data.map(item => {
      dateList.push(item.label);
      countList.push(item.count);
    });

    optionsCategory2.value = {
      title: {
        text: '换胎申请',
        subtext: '日期'
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: dateList,
        axisLabel: {
          show: true,
          fontSize: 8, // 根据需要调整字体大小
          interval: 0, // 设置为0以显示所有坐标点
          formatter: function(value) {
            return value.split("-")[1] + "-" + value.split("-")[2];
          }
        },
        // show: false
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          // 使用 formatter 函数格式化标签
          formatter: function(value) {
            // 返回值如果为整数则显示，否则返回空字符串
            return parseInt(value, 10) === value ? value : '';
          }
        }
      },
      series: [
        {
          type: 'bar',
          data: countList,
          label: {
            show: true,
            position: 'top', // 顶部显示
            formatter: '{c}', // 显示数据值
          },
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          },
          // barWidth: 30   // 设置每一列柱体宽度
        }
      ]
    };
  })
}
function warrantycardStatus() {
  if (null != dateRangeCreated && '' != dateRangeCreated) {
    queryParams.value["beginTime"] = dateRangeCreated.value[0];
    queryParams.value["endTime"] = dateRangeCreated.value[1];
  }
  getWarrantycardStatus(queryParams.value).then(response => {
    let data = response.data;

    let map = new Map();
    let newDate = new Array();
    let objList = service_warranty_card_status.value;

    for (let i = 0; i < objList.length; i++) {
      let key = objList[i].value;
      let value = objList[i].label;
      map.set(key, {name:value, value:0});
    }

    map.forEach((value, key) => {
      let newObj = value;

      for (let dataIndex in data) {
        let status = data[dataIndex].label;
        if (key == status) {
          newObj.value = data[dataIndex].count
        }
      }
      newDate.push(newObj);
    });

    optionsPie1.value = {
      title: {
        text: '质保卡',
        subtext: '状态',
        left: 'left'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        // orient: 'vertical',
        left: 'center',
        bottom: '8%',
        itemWidth: 6,
        itemHeight: 6,
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['30%', '50%'],
          center: ['50%', '50%'],
          minAngle: 2, // 最小的扇区角度（0~360），用于防止某个值过小导致扇区太小影响交互
          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
          label: {
            show: true,
            position: 'top',
            color: '#1B233E',
            formatter: function (params) {
              // return params.name + ' ' + params.value
              return params.value
            },
            normal: {
              formatter(v) {
                let text = v.name;
                let value_format = v.value;
                // let percent_format = Math.round(v.percent) + '%';
                let percent_format = '';
                if (text.length <= 6) {
                  return `${text}\n${value_format}\n${percent_format}`;
                } else if (text.length > 6 && text.length <= 12) {
                  return text = `${text.slice(0, 6)}\n${text.slice(6)}\n${value_format}\n${percent_format}`
                } else if (text.length > 12 && text.length <= 18) {
                  return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12)}\n${value_format}\n${percent_format}`
                } else if (text.length > 18 && text.length <= 24) {
                  return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18)}\n${value_format}\n${percent_format}`
                } else if (text.length > 24 && text.length <= 30) {
                  return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24)}\n${value_format}\n${percent_format}`
                } else if (text.length > 30) {
                  return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24, 30)}\n${text.slice(30)}\n${value_format}\n${percent_format}`
                }
              },
              textStyle: {
                fontSize: 14
              }
            }
          },
          labelLine: {
            show: true,       // 显示标签与饼图之间的连线
            length: 5,        // 标签线长度
            length2: 15,      // 第二段标签线长度
            smooth: 0.2,      // 标签线平滑度
          },
          labelLayout: {
            hideOverlap: false // 是否隐藏重叠标签
          },
          data: newDate.reverse(),
          // data: [
          //   { value: 1048, name: '审核中' },
          //   { value: 735, name: '已通过' },
          //   { value: 580, name: '已拒绝' },
          //   { value: 0, name: '已使用' },
          //   { value: 0, name: '已过期' },
          //   { value: 0, name: '未使用' }
          // ],
          //top: '40%',
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            },
            labelLine: {
              show: true,
              length: 10, // 标签线长度
              length2: 10, // 第二段标签线长度
              smooth: 0.2, // 标签线平滑度
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
  });
}
function servicerequestStatus(){
  if (null != dateRangeCreated && '' != dateRangeCreated) {
    queryParams.value["beginTime"] = dateRangeCreated.value[0];
    queryParams.value["endTime"] = dateRangeCreated.value[1];
  }
  getServicerequestStatus(queryParams.value).then(response => {
    let data = response.data;

    let map = new Map();
    let newDate = new Array();
    let objList = service_servicerequest_status.value;

    for (let i = 0; i < objList.length; i++) {
      let key = objList[i].value;
      let value = objList[i].label;
      map.set(key, {name:value, value:0});
    }

    map.forEach((value, key) => {
      let newObj = value;

      for (let dataIndex in data) {
        let status = data[dataIndex].label;
        if (key == status) {
          newObj.value = data[dataIndex].count
        }
      }
      newDate.push(newObj);
    });

    optionsPie2.value ={
      title: {
        text: '换胎申请',
        subtext: '状态',
        left: 'left'
      },
      tooltip: {
        trigger: 'item',
        // formatter: "{a} {b}: {c} ({d}%)" // {a} 表示系列名， {b} 表示数据项名称， {c} 表示数据值， {d} 表示百分比
      },
      legend: {
        //orient: 'vertical', // 纵向展示
        left: 'center',
        bottom: '8%',
        itemWidth: 6,
        itemHeight: 6,
      },
      series: [
        {
          // name: '轮胎申请',
          type: 'pie',
          radius: ['30%', '50%'],
          center: ['50%', '50%'],
          minAngle: 2, // 最小的扇区角度（0~360），用于防止某个值过小导致扇区太小影响交互
          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
          label: {
            show: true,
            position: 'outer',
            color: '#1B233E',
            formatter: function (params) {
              return params.name + ' ' + params.value
            },
            normal: {
              formatter(v) {
                let text = v.name;
                let value_format = v.value;
                // let percent_format = Math.round(v.percent) + '%';
                let percent_format = '';
                if (text.length <= 6) {
                  return `${text}\n${value_format}\n${percent_format}`;
                } else if (text.length > 6 && text.length <= 12) {
                  return text = `${text.slice(0, 6)}\n${text.slice(6)}\n${value_format}\n${percent_format}`
                } else if (text.length > 12 && text.length <= 18) {
                  return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12)}\n${value_format}\n${percent_format}`
                } else if (text.length > 18 && text.length <= 24) {
                  return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18)}\n${value_format}\n${percent_format}`
                } else if (text.length > 24 && text.length <= 30) {
                  return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24)}\n${value_format}\n${percent_format}`
                } else if (text.length > 30) {
                  return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24, 30)}\n${text.slice(30)}\n${value_format}\n${percent_format}`
                }
              },
              textStyle: {
                fontSize: 14
              }
            }
            // formatter: '{b}: {c} ({d}%)' // {a} 表示系列名， {b} 表示数据项名称， {c} 表示数据值， {d} 表示百分比
          },
          labelLine: {
            show: true,       // 显示标签与饼图之间的连线
            length: 5,        // 标签线长度
            length2: 15,      // 第二段标签线长度
            smooth: 0.2,      // 标签线平滑度
          },
          labelLayout: {
            hideOverlap: false // 是否隐藏重叠标签
          },
          //top: '40%',
          data: newDate,
          // data: [
          //   { value: 1048, name: '审核中' },
          //   { value: 735, name: '已通过' },
          //   { value: 580, name: '已拒绝' },
          //   { value: 484, name: 'Union Ads' },
          //   { value: 300, name: 'Video Ads' }
          // ],
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            },
            labelLine: {
              show: true,
              length: 1, // 标签线长度
              length2: 1, // 第二段标签线长度
              smooth: 0.2, // 标签线平滑度
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  })
}

function memberCount(){
  getMemberCount().then(response => {
    userCount.value = response.data;
  });
}

function warrantycardProvinceCount(){
  if (null != dateRangeCreated && '' != dateRangeCreated) {
    queryParams.value["beginTime"] = dateRangeCreated.value[0];
    queryParams.value["endTime"] = dateRangeCreated.value[1];
  }
  getWarrantycardProvinceCount(queryParams.value).then(response => {
    let data = response.data;
    let dateList = [];
    let countList = [];
    data.map(item => {
      dateList.push(item.label);
      countList.push(item.count);
    });

    optionsCategory3.value = {
      title: {
        text: '质保卡',
        subtext: '省份'
      },
      tooltip: {
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: dateList,
        axisLabel: {
          show: true,
          // margin: 10,
          fontSize: 12, // 根据需要调整字体大小
          interval: 0, // 设置为0以显示所有坐标点，
          formatter: function(value) {
            return value.split("").join("\n");
          }
        },
        show: true, // 是否显示底部标签
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          // 使用 formatter 函数格式化标签
          formatter: function(value) {
            // 返回值如果为整数则显示，否则返回空字符串
            return parseInt(value, 10) === value ? value : '';
          }
        }
      },
      series: [
        {
          // name: '待审核',
          type: 'bar',
          data: countList,
          barGap: '100%',
          label: {
            show: true,
            position: 'top', // 顶部显示
            formatter: '{c}', // 显示数据值
          },
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }
      ]
    };
  })
}

// memberCount();
memberWeek();
warrantycardProvinceCount();
warrantycardWeek();
servicerequestWeek();
warrantycardStatus();
servicerequestStatus();
warrantycardProvinceCount();

/** 搜索按钮操作 */
function handleQuery() {
  if (dateRangeCreated.value == null || dateRangeCreated.value.length <= 0 ) {
    dateRangeCreated.value = [];
  }
  if (queryParams.value.cityList == null || queryParams.value.cityList.length <= 0) {
    queryParams.value.cityList = null
  }

  memberWeek();
  warrantycardProvinceCount();
  warrantycardWeek();
  servicerequestWeek();
  warrantycardStatus();
  servicerequestStatus();
  warrantycardProvinceCount();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRangeCreated.value = [];
  queryParams.value.cityList = null;
  queryParams.value["beginTime"] = "";
  queryParams.value["endTime"] = "";

  proxy.resetForm("queryRef");
  handleQuery();
}

function goWarrantyCard() {
  const obj = { path: "/operate/warrantyCard" };
  proxy.$tab.openPage(obj);
}

function goServicerRquest() {
  const obj = { path: "/operate/servicerRquest" };
  proxy.$tab.openPage(obj);
}

function goTarget(url) {
  window.open(url, '__blank')
}
getCityTreeselect();
function getCityTreeselect() {
  listCityAll().then(response => {
    let cityLists = response.data;
    let newDate = new Array();
    let fatherMap = new Map();
    let children = new Array();
    for (let i = 0; i < cityLists.length; i++) {
      let id = cityLists[i]['Id'];
      let province = cityLists[i]['Province'];
      let city = cityLists[i]['City'];
      if (fatherMap.get(province) == undefined) {
        fatherMap.set(province, {
          id: province,
          label: province,
          children: []
        });
      } else {
        // fatherMap.get(province).children.push({
        //   id: city,
        //   label: city
        // })
      }
    }
    for (let [key, value] of fatherMap) {
      newDate.push(value);
    }

    cityOptions.value = newDate;
  });
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

